import RemoteSelect from '@/components/RemoteSelect';

import {Form, Input, Modal} from 'antd';

import React from 'react';
import type {CreationItem} from '../data';
import {getZoneSelectionList} from '@/pages/Zones/service';

interface AddFormProps {
  onSubmit: (values: CreationItem) => void;
  onCancel: (flag?: boolean) => void;
  modalVisible: boolean;
}

const formItemLayout = {
  labelCol: {
    xs: {span: 6},
    sm: {span: 6},
  },
  wrapperCol: {
    xs: {span: 18},
    sm: {span: 18},
  },
};

const AddForm: React.FC<AddFormProps> = props => {
  const [form] = Form.useForm();
  const {
    onSubmit: handleAdd,
    onCancel: handleAddModalVisible,
    modalVisible: addModalVisible,
  } = props;

  const onModalOk = async () => {
    const fieldsValue = (await form.validateFields()) as CreationItem;
    form.resetFields();
    handleAdd(fieldsValue);
  };

  return (
      <Modal
          title='添加车位信息'
          visible={addModalVisible}
          destroyOnClose
          onOk={() => onModalOk()}
          onCancel={() => handleAddModalVisible(false)}
          afterClose={() => handleAddModalVisible()}
          okText='确定'
          cancelText='取消'
      >
        <Form {...formItemLayout} form={form}>
          <Form.Item name='spaceName' label='车位号' rules={[{required: true, message: '必填'}]}>
            <Input/>
          </Form.Item>
          <Form.Item name='zone' label='停车区域' rules={[{required: true, message: '必选'}]}>
            <RemoteSelect
                getPopupContainer={triggerNode => triggerNode.parentElement} // 保证选择菜单不会随着页面滚动
                fieldNames={{key: 'id', value: 'id', label: 'name'}}
                request={search => getZoneSelectionList({name: search})}
            />
          </Form.Item>
          <Form.Item name='deviceNo' label='绑定设备' rules={[{required: true, message: '必选'}]}>
            <Input/>
          </Form.Item>

          {/*<Form.Item name='owner' label='泊位所有人' rules={ [ { required: false, message: '必选' } ] }>*/}
          {/*  <RemoteSelect*/}
          {/*    getPopupContainer={ triggerNode => triggerNode.parentElement } // 保证选择菜单不会随着页面滚动*/}
          {/*    fieldNames={ { key: 'id', value: 'id', label: 'name' } }*/}
          {/*    request={ search => findMatchOwnerList({ name: search, type: 1 }) }*/}
          {/*  />*/}
          {/*</Form.Item>*/}

        </Form>
      </Modal>
  );
};

export default AddForm;
